<template>
	<pages class="content" ref="pages">
		<view class="navBox paddingContent">
			<view @click="$TOOL.backPageRefresh()">
				<cicon name="return" :size="46"></cicon>
			</view>
			<view>
				我的歌单
			</view>
			<view class="moreActBox" @click="actNav=!actNav">
				<cicon name="more" :size="36"></cicon>
				 
				<uni-transition class="actNavBox"  mode-class="fade"  :show="actNav">	
					<view @click="editName='';addShow=true"><cicon name="plus" :size="30"></cicon>新建歌单</view>
					<view @click="get_playlist"><cicon name="synch" :size="30"></cicon>同步歌单</view>
				</uni-transition>
			</view> 
		</view>
		<view class="loading" v-if="isRequest">
			<view><cicon name="loading" :size="34"></cicon></view>
			正在同步歌单 ..
		</view>
		<view class="listBox paddingContent" v-else>
			<view class="item" v-for="item in playList">
				<view @click="musicList(item)">
					<view>
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
					<view>
						<view>{{item.name}}</view>
						<view>
							{{item.songs_total}} 首歌曲
						</view>
					</view>
				</view>
				
				<view @click="moreAct(item)">
					<cicon name="more" :size="32"></cicon>
				</view>
			</view>
		</view>
		
		
		<uni-transition class="dialog" @click="showDialog=false" mode-class="fade" :show="showDialog">
			<uni-transition class="actInfo" :mode-class="['fade','slide-bottom']" :show="showDialog" @touchstart="touchstart" @touchend="touchmove">	
				<view class="aInfo">
					<view>
						<image :src="actObj.cover" mode="aspectFill"></image>
					</view>
					<view>
						<view>{{actObj.name}}</view>
						<view>
							{{actObj.songs_total}} 首歌曲 
						</view>
					</view>
				</view>
				
				<view class="actBox">
					<view @click="play">
						<cicon name="play" :size="32"></cicon> <text>播放歌单</text>
					</view>

					<view @click="addToPlaylist">
						<cicon name="playlist" :size="34"></cicon> <text>加入播放队列</text>
					</view>
					
					<view @click="editName=actObj.name;editShow=true">
						<cicon name="edit" :size="32"></cicon> <text>重命名</text>
					</view> 
					<view @click="deleteShow=true">
						<cicon name="delete" :size="36" color="#FF5757"></cicon> <text>永久删除</text>
					</view>
				</view>
				
			</uni-transition>
		</uni-transition>
		
		<uni-transition class="dialog" @click="addShow=false" mode-class="fade" :show="addShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>新建歌单</view>
				<input v-model="editName" placeholder="歌单名称 .." />
				<view>
					<view @click="addShow=false">取消</view>
					<view @click="addSave">确定</view>
				</view>
			</view>
		</uni-transition>
		
		
		<uni-transition class="dialog" @click="editShow=false" mode-class="fade" :show="editShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>重命名</view>
				<input v-model="editName" placeholder="歌单名称 .." />
				<view>
					<view @click="editShow=false">取消</view>
					<view @click="save">确定</view>
				</view>
			</view>
		</uni-transition>
		
		<uni-transition class="dialog" @click="deleteShow=false" mode-class="fade" :show="deleteShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>删除歌单</view>
				<text>{{actObj.name}}</text>
				<view>
					<view @click="deleteShow=false">取消</view>
					<view @click="deleted">确定</view>
				</view>
			</view>
		</uni-transition>
		<play-list ref="playList"></play-list>
		 
		
	</pages>
</template>

<script>
	import defaultCover from '@/static/cover.png'
	import playList from "@/components/songList.vue"
	 
	export default {
		components: {
			playList,
		},
		data() {
			return {
				playList:[],
				showDialog:false,
				actObj:[],
				actNav:false,
				editShow:false,
				deleteShow:false,
				addShow:false,
				editName:'',
				isRequest:false,
				songList:[],
				globalPlayer:null,
				startX:0,
				startY:0,
			}
		},
		onShow() {
			// let playList = this.$TOOL.data.get('songList')
			// if(playList){
			// 	this.playList = playList
				 
			// }else{
			// 	this.get_playlist()
			// }
			this.get_playlist()
		},
		onLoad() {
			this.$nextTick(()=>{
				this.globalPlayer = this.$refs.pages.$refs.mplayer
			})
		},
		methods: {
			touchstart(event) {
			    this.startX = event.changedTouches[0].pageX
			    this.startY = event.changedTouches[0].pageY
			},
			
			touchmove(event) {  
			  
				  var moveEndX = event.changedTouches[0].pageX
				  var moveEndY = event.changedTouches[0].pageY
				  var X = moveEndX - this.startX
				  var Y = moveEndY - this.startY
				  if (Math.abs(X) > Math.abs(Y) && X > 50) {
					 return false
				  } else if (Math.abs(X) > Math.abs(Y) && X < 50) {
					 return false
				  } else if (Math.abs(Y) > Math.abs(X) && Y > 50) {
					 this.showDialog=false
				  } else if (Math.abs(Y) > Math.abs(X) && Y < 50) {
					 return false
				  } 
			},
			get_playlist(){
				this.isRequest = true
				this.$API.get_playlist.request({
					_sid:this.$TOOL.getSid(),
					library:'personal',
					limit: 1000,
					sort_direction: 'ASC',
				}).then(async (e)=>{
					 
					let playList = []
					for(let i in e.data.playlists){
						let item = e.data.playlists[i]
						if(item.id!=='playlist_personal_normal/__SYNO_AUDIO_SHARED_SONGS__'){
							
							let info = await this.$API.get_playlist_info.request({
								_sid:this.$TOOL.getSid(),
								id:item.id,
								library:'personal',
								additional: 'songs_song_tag,songs_song_audio,songs_song_rating,sharing_info'
							})
							 
							item.songs = info.data.playlists[0].additional.songs
							item.songs_total = info.data.playlists[0].additional.songs_total
							//取第一首歌封面作为封面
							item.cover = defaultCover
							if(item.songs_total!=0){
								item.cover = this.$TOOL.data.get('server_url')+this.$API.get_music_cover.url+'&id='+item.songs[0].id
							}
							
							playList.push(item)
						}
					}
					 
					
					
					 
					this.playList = playList
					this.isRequest = false
					this.$TOOL.data.set('songList',playList)
					 
					
				})
			
				 
			},
			
			
			musicList(item){
				 
				let songs = item.songs
				
				this.songList = this.get_music_list(songs)
				if(this.songList.length>0){
					this.$refs.playList.show(item,this.songList )
				}else{
					this.$TOOL.msg('这个歌单中没有歌曲')
				}
				
			},
			
			get_music_list(songs){
				let musicList = []
				songs.forEach((music)=>{
					let codec = music.additional.song_audio.codec
					let cover = this.$TOOL.data.get('server_url')+this.$API.get_music_cover.url+'&id='+music.id
					let item = {
						id:music.id,
						title:music.title,
						singer:music.additional.song_tag.artist,
						album:music.additional.song_tag.album,
						quality:(codec==='flac' || codec==='ape') ? 'SQ' : 'HQ',
						cover:cover,
						music:music,
						isPlay:0
					}
					musicList.push(item)
				})
				return musicList
			},
			
			moreAct(item){
				//歌单操作
				this.actObj = item
				this.showDialog = true
			},
			//新建歌单
			addSave(){
				this.$API.add_playlist.request({
					_sid:this.$TOOL.getSid(),
					id:this.actObj.id,
					name:this.editName,
					library:'personal', 
				}).then(()=>{
					this.addShow = false
					this.get_playlist()
				})
			},
			
			//保存歌单名称
			save(){
				this.$API.save_playlist_name.request({
					_sid:this.$TOOL.getSid(),
					id:this.actObj.id,
					new_name:this.editName,
					 
				}).then(()=>{
					this.editShow = false
					this.get_playlist()
				})
			},
			
			
			deleted(){
				this.$API.delete_playlist_name.request({
					_sid:this.$TOOL.getSid(),
					id:this.actObj.id,					 
				}).then(()=>{
					this.deleteShow = false
					this.$TOOL.msg('歌单删除成功')
					this.get_playlist()
				})
			},
			
			
			//加入播放队列
			addToPlaylist(){
				if(this.actObj.songs.length!=0){
					let musicList = this.get_music_list(this.actObj.songs)
					musicList.forEach((item)=>{
						this.$TOOL.playListManage.add(item)
					})
					this.$TOOL.msg('歌单已加入播放队列')
				}else{
					this.$TOOL.msg('当前歌单中没有歌曲')
				}
			},
			
			
			//播放歌单
			play(){
				if(this.actObj.songs.length!=0){
					//清空当前播放
					this.globalPlayer.stop()
					this.$TOOL.playListManage.clear()
					this.$nextTick(()=>{
						let musicList = this.get_music_list(this.actObj.songs)
						musicList.forEach((item)=>{
							this.$TOOL.playListManage.add(item)
						})
						//播放第一首
						this.globalPlayer.playMusic(musicList[0])
					})
				}else{
					this.$TOOL.msg('当前歌单中没有歌曲')
				}
				
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.listBox{
		height: calc( 100vh - 220rpx);
		padding-top: 40rpx; 
		overflow-y: auto;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			transition: 0.3s;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			>view{
				&:first-child{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: calc( 100% - 66rpx);
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 12rpx;
						display: block;
					}
					>view{
						 
						&:last-child{
						   margin-left: 24rpx;
						   width: calc(100% - 124rpx);
						   >view{
							   &:first-child{
								   font-size: 30rpx;
								   font-weight: 700;
								   white-space: nowrap; 
								   width: 100%; 
								   overflow: hidden;
								   text-overflow:ellipsis;
								   
							   }
							   &:last-child{
								   font-size: 22rpx;
								   font-weight: 400;
								   margin-top: 8rpx;
								   display: flex;
								   align-items: center;
								   justify-content: flex-start;
								   
								    
								   
								   
							   }
						   }
						}
					}
				}
				
				&:last-child{
					width:80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
	
	
	.moreActBox{
		position: relative;
		.actNavBox{
			background: #fff;
			padding: 20rpx 30rpx;
			position: absolute;
			right: 0;
			top: 60rpx;
			width: 160rpx;
			box-shadow: 0 0 12px #0000001f; 
			border-radius: 16rpx;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 500;
				margin-bottom: 10rpx;
				padding: 10rpx 0;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	
	
	
</style>
